<template>
  <div>
    <div>
      <div>
        读取两个 Excel 文件并导出第二个表格中存在但第一个表格中不存在的数据
      </div>
      <div>
        <label>上传第一个 Excel 文件：</label>
        <input
          type="file"
          @change="handleFileChange($event, 0)"
          accept=".xlsx, .xls"
        />
      </div>
      <div>
        <label>上传第二个 Excel 文件：</label>
        <input
          type="file"
          @change="handleFileChange($event, 1)"
          accept=".xlsx, .xls"
        />
      </div>
      <button @click="compareAndExport" :disabled="!file1 || !file2">
        比较并导出差异
      </button>
    </div>
    <hr />
    <div>
      <div>Excel 文件数据：</div>
      <div>
        <label>上传Excel 文件：</label>
        <input
          type="file"
          @change="handleFileChange($event, 2)"
          accept=".xlsx, .xls"
        />
      </div>
      <button @click="haha" :disabled="!file3">哈哈</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as XLSX from 'xlsx'

// 存储两个 Excel 文件的数据
const file1 = ref<any[][]>([])
const file2 = ref<any[][]>([])

const file3 = ref<any[][]>([])

// 处理文件选择
const handleFileChange = (event: Event, index: number) => {
  const input = event.target as HTMLInputElement
  if (input.files && input.files[0]) {
    const file = input.files[0]
    const reader = new FileReader()

    reader.onload = (e) => {
      const data = e.target?.result as ArrayBuffer
      const workbook = XLSX.read(new Uint8Array(data), { type: 'array' })

      // 获取第一个工作表
      const sheetName = workbook.SheetNames[0]
      const worksheet = workbook.Sheets[sheetName]

      // 将工作表转换为 JSON 数据
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

      // 存储数据
      if (index === 0) {
        file1.value = jsonData as any[][]
        // console.log('file1', file1.value)
      } else if (index === 1) {
        file2.value = jsonData as any[][]
        // console.log('file2', file2.value)
      } else if (index === 2) {
        file3.value = jsonData as any[][]
        // console.log('file3', file3.value)
      } else {
        console.log('index error')
      }
    }

    reader.readAsArrayBuffer(file)
  }
}

// 比较两个 Excel 文件的数据并导出差异
const compareAndExport = () => {
  if (!file1.value.length || !file2.value.length) {
    alert('请先上传两个 Excel 文件')
    return
  }
  let file1Arr = [] as any
  let file1Arr2 = [] as any
  let diffData = [] as any
  let excelData = [] as any

  file1.value.forEach((item) => {
    item.forEach((item2) => {
      file1Arr.push(item2)
    })
  })
  // console.log("file1Arr:", file1Arr);

  file2.value.forEach((item) => {
    item.forEach((item2) => {
      file1Arr2.push(item2)
    })
  })
  // console.log("file1Arr2:", file1Arr2);

  file1Arr2.forEach((item: any) => {
    if (!file1Arr.includes(item)) {
      // console.log("diffData:", item);
      diffData.push(item)
    }
  })

  // console.log("diffData:", diffData);

  diffData = [...new Set(diffData)]

  diffData.forEach((item: any) => {
    // console.log("diffData:", item);
    excelData.push([item])
  })

  // 将差异数据导出为新的 Excel 文件
  const ws = XLSX.utils.aoa_to_sheet(excelData)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '差异数据')
  XLSX.writeFile(wb, '差异数据.xlsx')
}

const haha = () => {
  if (!file3.value.length) {
    alert('请先上传 Excel 文件')
    return
  }
  for (let i = 0; i < file3.value.length; i++) {
    for (let j = 0; j < file3.value[i].length; j++) {
      if (j === 1) {
        let str = file3.value[i][j].split(' ').join('') + '_key'
        file3.value[i][j + 1] = str
        break
      }
    }
  }
  file3.value = [...new Set(file3.value)]
  // 导出 Excel 文件
  const ws = XLSX.utils.aoa_to_sheet(file3.value)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, '翻译结果_key')
  XLSX.writeFile(wb, '翻译结果_key.xlsx')
}
</script>

<style scoped>
div {
  margin-bottom: 10px;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>
